<script setup lang="ts">
import { ref, reactive } from 'vue'

const url = ref('')

const authInfo = reactive({
  localstorage: '',
  cookie: '',
  show: false
})

const openUrl = async () => {
  window.api.invoke('openUrl', url.value)
}

const getAuthInfo = async () => {
  const res = await window.api.invoke('getAuthInfo')
  if (!res) return
  authInfo.localstorage = JSON.stringify(res.localstorage)
  authInfo.cookie = JSON.stringify(res.cookie)
  authInfo.show = true
}
</script>

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    "
  >
    <el-space direction="vertical">
      <el-input v-model="url" type="text" placeholder="请输入网址" style="width: 300px" />
      <el-button type="primary" style="width: 300px" @click="openUrl">进入</el-button>
      <el-button type="primary" style="width: 300px" @click="getAuthInfo">获取认证信息</el-button>
    </el-space>
    <el-dialog v-model="authInfo.show" title="认证信息" width="900px" show-close @closed="authInfo.show = false">
      <el-form label-width="120px">
        <el-form-item label="localstorage">
          <el-input
            v-model="authInfo.localstorage"
            disabled
            type="textarea"
            :rows="6"
            style="width: 700px"
          />
        </el-form-item>
        <el-form-item label="cookie">
          <el-input
            v-model="authInfo.cookie"
            disabled
            type="textarea"
            :rows="6"
            style="width: 700px"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
